<template>
  <div>
    <icon-sound v-if="volume" :size="20"/>
    <icon-mute v-else :size="20"/>
    <a-slider :max="100" :min="0" :model-value="volume" :style="{ width: '80px' }" class="slider" show-ticks
              @change="adjust"/>
    <icon-menu-unfold :size="20" style="cursor: pointer" @click="side"/>
    <Diewr ref="DiewrRef" title="播放列表">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="歌曲名"/>
        <el-table-column prop="name" label="歌手"/>
        <el-table-column prop="address" label="时间"/>
      </el-table>
    </Diewr>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {debounce} from "~/uilti/tool"
import Diewr from "~/components/layout/drawer.vue"
import atale from "~/pages/detail/conponents/table.vue"

const volume = ref(20)
const emit = defineEmits(['volumeAdjustment'])
onMounted(() => {
  emit('volumeAdjustment', volume.value)
  console.log('222')
})


const adjust = (e) => {
  volume.value = e
  debounce(() => {
    emit('volumeAdjustment', e)
  }, 500)
}

const DiewrRef = ref(null)

const side = () => {
  DiewrRef.value.open()
}

</script>

<style scoped>
.slider {
  margin: 0 1rem;
}
</style>